<template>
  <el-card class="box-card">
    <!-- header -->
    <div slot="header" class="clearfix header">
      <Header />
    </div>
    <!-- main  horizontal vertical -->
    <div class="components-container">
      <split-pane split="horizontal" @resize="resize">
        <template slot="paneL">
          <split-pane split="vertical">
            <template slot="paneL">
              <div class="top-container-left">
                <SqlEdit @executeSql="executeSql" />
              </div>
            </template>
            <template slot="paneR">
              <div class="top-container-right-right">
                <Jsoneditor @changed="JsonChange" ref="jsonEditor" :jsonData="jsonData" v-model="jsonData" />
              </div>
            </template>
          </split-pane>
        </template>
        <template slot="paneR">
          <div class="left-container">
            <Table />
          </div>
        </template>
      </split-pane>
    </div>
  </el-card>
</template>

<script>
/* eslint-disable */
import Header from '@/components/Header.vue'
import Table from '@/components/Table.vue'
import Jsoneditor from '@/components/JsonEditor'
import SqlEdit from '@/components/sqlEdit'
 
import splitPane from 'vue-splitpane' 
var FileSaver = require('file-saver')

export default {
  components: {
    Header,
    splitPane,
    SqlEdit,
    Table,
    Jsoneditor
  },
  data () {
    return {
      jsonData: '', // json编辑器   
    }
  },

  mounted () { 
  },
  methods: {
    executeSql(val){
      if (val.trim()) {
        this.$message.success('正在发送请求')
        this.jsonData = [
          {
            items: [
              { market_type: 'forexdata', symbol: 'XAUUSD' },
              { market_type: 'forexdata', symbol: 'UKOIL' },
              { market_type: 'forexdata', symbol: 'CORN' }
            ],
            name: ''
          }
        ]
      } else {
        this.$message.error('请填写sql语句')
      }
    },
    exportJSON () {
      // 将json转换成字符串
      const data = this.jsonData
      const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
      FileSaver.saveAs(blob, 'hahaha.txt')
    },
    JsonChange(val){
      console.log(val)
    },
    resize () {
      console.log('resize')
    }
  },
  beforeDestroy () {
  }
}
</script>

<style scoped lang="less">
// @mixin center() {
//   display:npm install -D stylus-loader stylus flex;
//   align-items: center;
// }
// @mixin BackGroundImg($url) {
//   background: url($url) no-repeat;
//   background-size: 100% 100%;
// }
// @mixin absoluteCenter() {
//   position: absolute;
//   top: 50%;
//   left: 50%;
//   transform: translate(-50%, -50%);
// }
.box-card {
  padding: 0;
  // header
  .header {
    position: sticky;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 10px;
  }
  // main
  .components-container {
    position: relative;
    height: 110vh;
    .left-container {
      background-color: #f38181;
      // height: 100%;
      overflow: hidden;
    }

    .right-container {
      background-color: #fce38a;
      height: 100px;
    }

    .top-container-left {
      background-color: #fce38a;
      width: 100%;
      height: 100%;
      overflow: hidden;
      /deep/.CodeMirror {
        // sql 编辑器
        width: 99% !important;
        height: 98% !important;
        margin: 0 auto 0;
        font-size: 16px;
      }
    }
    .top-container-right-right {
      width: 100%;
      background-color: #95e1d3;
      height: 100%;
      /deep/.CodeMirror {
        // json 编辑器
        width: 99% !important;
        height: 98% !important;
        margin: 0 auto 0;
        font-size: 12px;
      }
    }
  }
}
.placeholder-container div {
  margin: 10px;
}
</style>
